<template>
<div style="z-index:7;left: 0;top: 0;position: fixed;height: 100%;width: 100%;background-color:white">
    <div class="zhezhao"></div>
    <img src="../../../../assets/changepsw/back.png" class="img_back" @click="goper">
    <div class="div1">
        <span>个人资料</span>
    </div>
    <div class="div2">
        <div class="div3">账号管理
        </div>
        <div class="div3" @click="checkphone()">手机号码
            <span class="span1" v-if="!phone&&ShowLater" :style="ShowOpacity">绑定手机号</span>
            <span class="span1" v-if="phone&&ShowLater" :style="ShowOpacity">{{phone.slice(0,3)}}******{{phone.slice(9,11)}}</span>
            <img src="../../../../assets/changepsw/forward.png" class="img_forward">
        </div>
        <div class="div3" @click="chooseSex()">性别
            <span class="span1" v-show="sex=='怪兽'&&ShowLater" :style="ShowOpacity">选择性别</span>
            <span class="span1" v-show="sex!='怪兽'&&ShowLater" :style="ShowOpacity">{{sex}}</span>
            <img src="../../../../assets/changepsw/forward.png" class="img_forward">
        </div>
        <div class="div3" @click="checkemail()" style="border-bottom:0px">邮箱
            <span class="span1" v-if="!email&&ShowLater" :style="ShowOpacity">添加邮箱</span>
            <span class="span1" v-if="email&&ShowLater" :style="ShowOpacity">{{email.slice(0,2)}}******{{email.slice(email.length-8)}}</span>
            <img src="../../../../assets/changepsw/forward.png" class="img_forward">
        </div>
    </div>
    <ImgBoy class="img_boy" v-if="sex=='男'&&ShowLater" :style="ShowOpacity"></ImgBoy>
    <ImgGirl class="img_boy" v-if="sex=='女'&&ShowLater" :style="ShowOpacity"></ImgGirl>
    <ImgMonster v-if="sex=='怪兽'&&ShowLater" class="img_boy" :style="'right:-25px;'+ShowOpacity"></ImgMonster>
    <ImgInfo class="img_info"></ImgInfo>
</div>
</template>

<script>
import ImgBoy from './img/info/img_boy.vue'
import ImgGirl from './img/info/img_girl.vue'
import ImgMonster from './img/info/img_monster.vue'
import ImgInfo from './img/info/img_info.vue'
export default {
    name:'infoshow',
    components:{ImgBoy,ImgGirl,ImgMonster,ImgInfo},
    data(){
        return{
            phone:'',
            sex:'怪兽',
            email:'',
            ShowLater:0,
            ShowOpacity:'',
        }
    },
    methods:{
        goper(){this.$router.replace({name:'intercept_backspace'})},
        checkphone(){this.$router.push({name:'checkphone'})},
        chooseSex(){this.$router.push({name:'chooseSex'})},
        checkemail(){this.$router.push({name:'checkemail'})},
    },
    mounted(){
        setTimeout(() => {
            this.ShowLater=1
        }, 200);
        let num =0
        this.ShowOpacity='opacity:'+num+';'
        var id = setInterval(() => {
            if(num >=1){
                clearInterval(id)
            }else{
                this.ShowOpacity='opacity:'+num+';'
                num+=0.05
            }
        }, 45);
        this.$addr.get(`user/get_by_uid`).then(
            response=>{
                console.log('获取用户数据请求成功',response.data);
                if(response.data.data.phone != null){
                    this.phone=response.data.data.phone
                }
                if(response.data.data.gender != null){
                    this.sex=response.data.data.gender==1?'男':'女'
                }
                if(response.data.data.email != null){
                    this.email=response.data.data.email
                }
            },error=>{
                // this.$message({
                //     message:'获取用户数据请求失败，请重新登陆',
                //     type:'error'
                // })
                // console.log("获取用户数据请求失败",error.message);
                //this.$router.replace({name:'login'})
            }
        )
    }
}
</script>

<style scoped>
.div1{
    background: linear-gradient(to right,rgb(255, 182, 238),rgb(255, 113, 236));
    color: white;
    text-align: center;
    width: 100%;
    padding-top: 23px;
    padding-bottom: 15px;
    user-select: none;
}
.img_back{
    position: fixed;
    margin-top: 28px;
    left: 14px;
    height: 18px;
}
.zhezhao{
    width: 100%;
    height: 100%;
    background-color: rgb(252, 245, 252);
    opacity: 0.4;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}
.div2{
    margin-left: 5px;
    margin-right: 5px;
    background-color: rgb(255, 255, 255);
    border-radius: 8px;
    margin-top: 10px;
    font-size: 17px;
    box-shadow: 0px 2px 4px 0.1px rgb(236, 236, 236);
}
.div3{
    border-bottom: 0.5px solid rgba(210, 210, 210, 0.5);
    padding-top: 14px;
    padding-bottom: 14px;
    margin-left: 18px;
    margin-right: 18px;
}
.span1{
    font-size: 14px;
    position: fixed;
    right: 50px;
    color: rgb(162, 162, 162);
    margin-top: 4px;
}
.img_forward{
    height: 13px;
    position: fixed;
    right: 30px;
    margin-top: 7px;
}
.img_boy{
    position: fixed;
    height: 280px;
    right: -30px;
    bottom: 20px;
}
.img_info{
    position: fixed;
    width: 40%;
    top: 150px;
    z-index: -1;
}
</style>